<template>
  <div class="transfer-record-container">
    <!-- 页面头部区域 -->
    <div class="transfer-header">
      <div class="header-content">
        <div class="ancient-title">职位调动记录</div>
        <div class="header-subtitle">阴曹地府 · 仙官调动与变更管理</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">🔄</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management/official-position">
            <CrownOutlined />
            仙官职位管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <SwapOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 调动统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <SwapOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">本年调动</div>
              <div class="stat-value">{{ transferStats.yearlyTransfers }}</div>
              <div class="stat-label">调动记录</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">晋升人数</div>
              <div class="stat-value">{{ transferStats.promotions }}</div>
              <div class="stat-label">本年</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待审批</div>
              <div class="stat-value">{{ transferStats.pendingApprovals }}</div>
              <div class="stat-label">调动申请</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">成功率</div>
              <div class="stat-value">{{ transferStats.successRate }}%</div>
              <div class="stat-label">调动成功</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能选项卡 -->
    <div class="tabs-section">
      <a-tabs v-model:activeKey="activeTab" type="card" @change="handleTabChange">
        <a-tab-pane key="records" tab="调动记录">
          <template #tab>
            <span>
              <SwapOutlined />
              调动记录
            </span>
          </template>
        </a-tab-pane>
        <a-tab-pane key="applications" tab="调动申请">
          <template #tab>
            <span>
              <FileTextOutlined />
              调动申请
            </span>
          </template>
        </a-tab-pane>
        <a-tab-pane key="analysis" tab="统计分析">
          <template #tab>
            <span>
              <BarChartOutlined />
              统计分析
            </span>
          </template>
        </a-tab-pane>
        <a-tab-pane key="warning" tab="预警系统">
          <template #tab>
            <span>
              <AlertOutlined />
              预警系统
            </span>
          </template>
        </a-tab-pane>
        <a-tab-pane key="templates" tab="模板管理">
          <template #tab>
            <span>
              <SettingOutlined />
              模板管理
            </span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 调动记录内容 -->
    <div v-show="activeTab === 'records'">
      <!-- 操作区域 -->
      <div class="action-section">
        <a-row justify="space-between" align="middle">
          <a-col>
            <h3 class="section-title">
              <SwapOutlined class="section-icon" />
              调动记录管理
            </h3>
          </a-col>
          <a-col>
            <a-space>
              <a-button type="primary" @click="showAddTransferModal">
                <PlusOutlined />
                新增调动
              </a-button>
              <a-button @click="exportRecords">
                <ExportOutlined />
                导出记录
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>

      <!-- 筛选区域 -->
      <div class="filter-section">
        <a-card :bordered="false">
          <a-row :gutter="16">
            <a-col :span="6">
              <a-select v-model:value="filterType" placeholder="调动类型" style="width: 100%" allow-clear>
                <a-select-option value="">全部类型</a-select-option>
                <a-select-option value="promotion">晋升</a-select-option>
                <a-select-option value="demotion">降职</a-select-option>
                <a-select-option value="transfer">调岗</a-select-option>
                <a-select-option value="rotation">轮岗</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="6">
              <a-select v-model:value="filterStatus" placeholder="审批状态" style="width: 100%" allow-clear>
                <a-select-option value="">全部状态</a-select-option>
                <a-select-option value="pending">待审批</a-select-option>
                <a-select-option value="approved">已通过</a-select-option>
                <a-select-option value="rejected">已拒绝</a-select-option>
                <a-select-option value="executed">已执行</a-select-option>
              </a-select>
            </a-col>
            <a-col :span="6">
              <a-range-picker v-model:value="filterDateRange" style="width: 100%" />
            </a-col>
            <a-col :span="6">
              <a-input-search v-model:value="searchText" placeholder="搜索仙官姓名" @search="handleSearch" />
            </a-col>
          </a-row>
        </a-card>
      </div>

      <!-- 调动记录列表 -->
      <div class="record-list-section">
        <a-card title="调动记录列表" :bordered="false">
          <a-table :columns="recordColumns" :data-source="filteredRecords" :pagination="pagination" :loading="loading" row-key="id">
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'type'">
                <a-tag :color="getTypeColor(record.type)">
                  {{ getTypeText(record.type) }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'fromPosition'">
                <div>
                  <div>{{ record.fromPosition }}</div>
                  <small style="color: #999">{{ getDepartmentName(record.fromDepartment) }}</small>
                </div>
              </template>
              <template v-else-if="column.key === 'toPosition'">
                <div>
                  <div>{{ record.toPosition }}</div>
                  <small style="color: #999">{{ getDepartmentName(record.toDepartment) }}</small>
                </div>
              </template>
              <template v-else-if="column.key === 'status'">
                <a-tag :color="getStatusColor(record.status)">
                  {{ getStatusText(record.status) }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'action'">
                <a-space>
                  <a-button type="link" size="small" @click="viewRecord(record)">
                    <EyeOutlined />
                    详情
                  </a-button>
                  <a-button v-if="record.status === 'pending'" type="link" size="small" @click="approveTransfer(record)">
                    <CheckOutlined />
                    审批
                  </a-button>
                  <a-button v-if="record.status === 'approved'" type="link" size="small" @click="executeTransfer(record)">
                    <PlayCircleOutlined />
                    执行
                  </a-button>
                  <a-button type="link" size="small" @click="editRecord(record)">
                    <EditOutlined />
                    编辑
                  </a-button>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>

      <!-- 新增/编辑调动弹窗 -->
      <a-modal v-model:open="transferModalVisible" :title="modalTitle" @ok="handleTransferSubmit" @cancel="handleTransferCancel" width="800px">
        <a-form ref="transferFormRef" :model="transferForm" :rules="transferRules" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="仙官姓名" name="officialName">
                <a-select v-model:value="transferForm.officialName" placeholder="选择仙官" show-search :filter-option="false" @search="searchOfficials">
                  <a-select-option v-for="official in officials" :key="official.id" :value="official.name"> {{ official.name }} - {{ official.currentPosition }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="调动类型" name="type">
                <a-select v-model:value="transferForm.type" placeholder="选择调动类型">
                  <a-select-option value="promotion">晋升</a-select-option>
                  <a-select-option value="demotion">降职</a-select-option>
                  <a-select-option value="transfer">调岗</a-select-option>
                  <a-select-option value="rotation">轮岗</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="原职位" name="fromPosition">
                <a-input v-model:value="transferForm.fromPosition" placeholder="原职位" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="新职位" name="toPosition">
                <a-input v-model:value="transferForm.toPosition" placeholder="请输入新职位" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="原部门" name="fromDepartment">
                <a-select v-model:value="transferForm.fromDepartment" placeholder="原部门" disabled>
                  <a-select-option v-for="dept in departments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="新部门" name="toDepartment">
                <a-select v-model:value="transferForm.toDepartment" placeholder="选择新部门">
                  <a-select-option v-for="dept in departments" :key="dept.id" :value="dept.id">
                    {{ dept.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="调动原因" name="reason">
            <a-textarea v-model:value="transferForm.reason" placeholder="请输入调动原因" :rows="3" />
          </a-form-item>

          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="生效日期" name="effectiveDate">
                <a-date-picker v-model:value="transferForm.effectiveDate" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="申请人" name="applicant">
                <a-input v-model:value="transferForm.applicant" placeholder="申请人" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <!-- 调动详情弹窗 -->
      <a-modal v-model:open="detailModalVisible" title="调动记录详情" :footer="null" width="800px">
        <div v-if="selectedRecord">
          <a-descriptions title="基本信息" :column="2" bordered>
            <a-descriptions-item label="仙官姓名">{{ selectedRecord.officialName }}</a-descriptions-item>
            <a-descriptions-item label="调动类型">
              <a-tag :color="getTypeColor(selectedRecord.type)">
                {{ getTypeText(selectedRecord.type) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="原职位">
              {{ selectedRecord.fromPosition }}
              <br />
              <small style="color: #999">{{ getDepartmentName(selectedRecord.fromDepartment) }}</small>
            </a-descriptions-item>
            <a-descriptions-item label="新职位">
              {{ selectedRecord.toPosition }}
              <br />
              <small style="color: #999">{{ getDepartmentName(selectedRecord.toDepartment) }}</small>
            </a-descriptions-item>
            <a-descriptions-item label="申请日期">{{ selectedRecord.applyDate }}</a-descriptions-item>
            <a-descriptions-item label="生效日期">{{ selectedRecord.effectiveDate }}</a-descriptions-item>
            <a-descriptions-item label="申请人">{{ selectedRecord.applicant }}</a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="getStatusColor(selectedRecord.status)">
                {{ getStatusText(selectedRecord.status) }}
              </a-tag>
            </a-descriptions-item>
          </a-descriptions>

          <a-divider>调动原因</a-divider>
          <p>{{ selectedRecord.reason }}</p>

          <a-divider v-if="selectedRecord.approvalHistory">审批历史</a-divider>
          <a-timeline v-if="selectedRecord.approvalHistory">
            <a-timeline-item v-for="item in selectedRecord.approvalHistory" :key="item.id" :color="item.color">
              <div class="approval-item">
                <div class="approval-header">
                  <span class="approval-action">{{ item.action }}</span>
                  <span class="approval-time">{{ item.time }}</span>
                </div>
                <div class="approval-operator">审批人：{{ item.operator }}</div>
                <div class="approval-comment" v-if="item.comment">{{ item.comment }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </a-modal>
    </div>

    <!-- 调动申请内容 -->
    <div v-show="activeTab === 'applications'">
      <a-card title="调动申请管理" :bordered="false">
        <template #extra>
          <a-button type="primary" @click="showApplicationModal">
            <PlusOutlined />
            新增申请
          </a-button>
        </template>

        <a-table :columns="applicationColumns" :data-source="applications" :pagination="{ pageSize: 10 }" size="small">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'priority'">
              <a-tag :color="getPriorityColor(record.priority)">
                {{ getPriorityText(record.priority) }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'actions'">
              <a-space>
                <a-button type="link" size="small" @click="processApplication(record)">
                  <CheckOutlined />
                  处理
                </a-button>
                <a-button type="link" size="small" @click="viewApplication(record)">
                  <EyeOutlined />
                  详情
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 统计分析内容 -->
    <div v-show="activeTab === 'analysis'">
      <a-card title="调动统计分析" :bordered="false">
        <template #extra>
          <a-space>
            <a-range-picker v-model:value="analysisDateRange" @change="updateAnalysis" />
            <a-button @click="refreshCharts" type="primary">
              <BarChartOutlined />
              刷新图表
            </a-button>
            <a-button @click="exportAnalysis">
              <ExportOutlined />
              导出报告
            </a-button>
          </a-space>
        </template>

        <a-row :gutter="24">
          <a-col :span="12">
            <div class="transfer-trend">
              <h4>调动趋势</h4>
              <div id="transferTrendChart" class="chart-container"></div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="type-distribution">
              <h4>调动类型分布</h4>
              <div id="typeDistributionChart" class="chart-container"></div>
            </div>
          </a-col>
        </a-row>

        <div class="analysis-summary">
          <h4>调动分析摘要</h4>
          <a-row :gutter="24">
            <a-col :span="8">
              <div class="summary-item">
                <div class="summary-title">调动活跃度</div>
                <div class="summary-value">{{ analysisData.activity }}%</div>
                <div class="summary-trend">
                  <ArrowUpOutlined style="color: #52c41a" />
                  <span>较上月增长 {{ analysisData.activityGrowth }}%</span>
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="summary-item">
                <div class="summary-title">平均处理时间</div>
                <div class="summary-value">{{ analysisData.avgProcessTime }}天</div>
                <div class="summary-trend">
                  <ArrowDownOutlined style="color: #52c41a" />
                  <span>较上月减少 {{ analysisData.timeReduction }}天</span>
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="summary-item">
                <div class="summary-title">调动满意度</div>
                <div class="summary-value">{{ analysisData.satisfaction }}%</div>
                <div class="summary-trend">
                  <ArrowUpOutlined style="color: #52c41a" />
                  <span>较上月提升 {{ analysisData.satisfactionIncrease }}%</span>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </div>

    <!-- 预警系统内容 -->
    <div v-show="activeTab === 'warning'">
      <a-card title="调动预警系统" :bordered="false">
        <template #extra>
          <a-button type="primary" @click="showWarningConfigModal">
            <SettingOutlined />
            预警配置
          </a-button>
        </template>

        <a-row :gutter="24">
          <a-col :span="16">
            <div class="warning-rules">
              <h4>预警规则</h4>
              <a-table :columns="warningColumns" :data-source="warningRules" :pagination="{ pageSize: 5 }" size="small">
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'level'">
                    <a-tag :color="getWarningLevelColor(record.level)">
                      {{ getWarningLevelText(record.level) }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'status'">
                    <a-tag :color="record.status === 'active' ? 'green' : 'red'">
                      {{ record.status === 'active' ? '启用' : '禁用' }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'actions'">
                    <a-space>
                      <a-button type="link" size="small" @click="editWarningRule(record)">编辑</a-button>
                      <a-button type="link" size="small" @click="testWarningRule(record)">测试</a-button>
                    </a-space>
                  </template>
                </template>
              </a-table>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="warning-alerts">
              <h4>当前预警</h4>
              <div class="alert-list">
                <div v-for="alert in warningAlerts" :key="alert.id" class="alert-item">
                  <div class="alert-icon">
                    <ExclamationCircleOutlined />
                  </div>
                  <div class="alert-content">
                    <div class="alert-title">{{ alert.title }}</div>
                    <div class="alert-description">{{ alert.description }}</div>
                    <div class="alert-time">{{ alert.time }}</div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <!-- 模板管理内容 -->
    <div v-show="activeTab === 'templates'">
      <a-card title="调动模板管理" :bordered="false">
        <template #extra>
          <a-button type="primary" @click="showTemplateModal">
            <PlusOutlined />
            新增模板
          </a-button>
        </template>

        <a-row :gutter="24">
          <a-col :span="16">
            <div class="template-list">
              <div v-for="template in transferTemplates" :key="template.id" class="template-item">
                <div class="template-header">
                  <div class="template-info">
                    <h4 class="template-name">{{ template.name }}</h4>
                    <p class="template-description">{{ template.description }}</p>
                  </div>
                  <div class="template-actions">
                    <a-dropdown>
                      <a-button type="text" size="small">
                        <MoreOutlined />
                      </a-button>
                      <template #overlay>
                        <a-menu>
                          <a-menu-item @click="useTemplate(template)">
                            <PlayCircleOutlined />
                            使用模板
                          </a-menu-item>
                          <a-menu-item @click="editTemplate(template)">
                            <EditOutlined />
                            编辑
                          </a-menu-item>
                          <a-menu-item @click="copyTemplate(template)">
                            <CopyOutlined />
                            复制
                          </a-menu-item>
                          <a-menu-divider />
                          <a-menu-item @click="deleteTemplate(template)" style="color: #ff4d4f">
                            <DeleteOutlined />
                            删除
                          </a-menu-item>
                        </a-menu>
                      </template>
                    </a-dropdown>
                  </div>
                </div>

                <div class="template-content">
                  <div class="template-fields">
                    <div class="field-item">
                      <span class="field-label">适用类型：</span>
                      <a-tag :color="getTypeColor(template.type)">{{ getTypeText(template.type) }}</a-tag>
                    </div>
                    <div class="field-item">
                      <span class="field-label">使用次数：</span>
                      <span class="field-value">{{ template.usageCount }}</span>
                    </div>
                    <div class="field-item">
                      <span class="field-label">创建时间：</span>
                      <span class="field-value">{{ template.createTime }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="template-stats">
              <h4>模板统计</h4>
              <div class="stats-list">
                <div class="stat-item">
                  <span class="stat-label">总模板数：</span>
                  <span class="stat-value">{{ templateStats.total }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">活跃模板：</span>
                  <span class="stat-value">{{ templateStats.active }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">使用频率：</span>
                  <span class="stat-value">{{ templateStats.usage }}%</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
import { message } from 'ant-design-vue'
import * as echarts from 'echarts'
import {
  HomeOutlined,
  ApartmentOutlined,
  CrownOutlined,
  SwapOutlined,
  RiseOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  PlusOutlined,
  ExportOutlined,
  EyeOutlined,
  CheckOutlined,
  PlayCircleOutlined,
  EditOutlined,
  FileTextOutlined,
  BarChartOutlined,
  AlertOutlined,
  SettingOutlined,
  MoreOutlined,
  CopyOutlined,
  DeleteOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue'

// 响应式数据
const activeTab = ref('records')
const loading = ref(false)
const searchText = ref('')
const filterType = ref('')
const filterStatus = ref('')
const filterDateRange = ref([])
const transferModalVisible = ref(false)
const detailModalVisible = ref(false)
const selectedRecord = ref(null)
const transferFormRef = ref()
const analysisDateRange = ref([])
const trendChart = ref(null)
const typeChart = ref(null)

// 新增数据
const applications = ref([
  {
    id: 1,
    applicant: '张三',
    currentPosition: '初级文书',
    targetPosition: '高级文书',
    type: 'promotion',
    priority: 'high',
    status: 'pending',
    submitTime: '2024-01-15'
  },
  {
    id: 2,
    applicant: '李四',
    currentPosition: '判官',
    targetPosition: '判官',
    type: 'transfer',
    priority: 'medium',
    status: 'approved',
    submitTime: '2024-01-14'
  }
])

const applicationColumns = ref([
  { title: '申请人', dataIndex: 'applicant', key: 'applicant', width: 100 },
  { title: '当前职位', dataIndex: 'currentPosition', key: 'currentPosition', width: 120 },
  { title: '目标职位', dataIndex: 'targetPosition', key: 'targetPosition', width: 120 },
  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
  { title: '优先级', dataIndex: 'priority', key: 'priority', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '提交时间', dataIndex: 'submitTime', key: 'submitTime', width: 120 },
  { title: '操作', key: 'actions', width: 120 }
])

const analysisData = reactive({
  activity: 78,
  activityGrowth: 15,
  avgProcessTime: 7,
  timeReduction: 2,
  satisfaction: 92,
  satisfactionIncrease: 5
})

const warningRules = ref([
  {
    id: 1,
    name: '频繁调动预警',
    description: '同一人员6个月内调动超过2次',
    level: 'high',
    status: 'active'
  },
  {
    id: 2,
    name: '部门人员流失预警',
    description: '部门月度调出人员超过20%',
    level: 'medium',
    status: 'active'
  }
])

const warningColumns = ref([
  { title: '规则名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '规则描述', dataIndex: 'description', key: 'description', width: 200 },
  { title: '预警级别', dataIndex: 'level', key: 'level', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '操作', key: 'actions', width: 120 }
])

const warningAlerts = ref([
  {
    id: 1,
    title: '频繁调动预警',
    description: '张三在6个月内已调动3次',
    time: '2024-01-15 10:30'
  },
  {
    id: 2,
    title: '部门人员流失预警',
    description: '第二殿本月调出人员已达25%',
    time: '2024-01-15 09:15'
  }
])

const transferTemplates = ref([
  {
    id: 1,
    name: '晋升模板',
    description: '适用于常规晋升调动',
    type: 'promotion',
    usageCount: 156,
    createTime: '2023-12-01'
  },
  {
    id: 2,
    name: '跨部门调动模板',
    description: '适用于跨部门调岗',
    type: 'transfer',
    usageCount: 89,
    createTime: '2023-12-05'
  }
])

const templateStats = reactive({
  total: 8,
  active: 6,
  usage: 85
})

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 调动统计
const transferStats = reactive({
  yearlyTransfers: 285,
  promotions: 156,
  pendingApprovals: 23,
  successRate: 92
})

// 部门数据
const departments = ref([
  { id: 'first_court', name: '第一殿秦广王府' },
  { id: 'second_court', name: '第二殿楚江王府' },
  { id: 'third_court', name: '第三殿宋帝王府' },
  { id: 'fourth_court', name: '第四殿五官王府' },
  { id: 'fifth_court', name: '第五殿阎罗王府' }
])

// 仙官数据
const officials = ref([
  { id: 1, name: '张三', currentPosition: '初级判官', currentDepartment: 'first_court' },
  { id: 2, name: '李四', currentPosition: '高级文书', currentDepartment: 'second_court' },
  { id: 3, name: '王五', currentPosition: '守护队长', currentDepartment: 'third_court' }
])

// 表格列配置
const recordColumns = [
  {
    title: '仙官姓名',
    dataIndex: 'officialName',
    key: 'officialName',
    width: 120
  },
  {
    title: '调动类型',
    dataIndex: 'type',
    key: 'type',
    width: 100
  },
  {
    title: '原职位',
    dataIndex: 'fromPosition',
    key: 'fromPosition',
    width: 160
  },
  {
    title: '新职位',
    dataIndex: 'toPosition',
    key: 'toPosition',
    width: 160
  },
  {
    title: '申请日期',
    dataIndex: 'applyDate',
    key: 'applyDate',
    width: 120,
    sorter: true
  },
  {
    title: '生效日期',
    dataIndex: 'effectiveDate',
    key: 'effectiveDate',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
    key: 'applicant',
    width: 120
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right'
  }
]

// 调动记录数据
const records = ref([
  {
    id: 1,
    officialName: '秦广王',
    type: 'promotion',
    fromPosition: '副主审',
    fromDepartment: 'first_court',
    toPosition: '主审',
    toDepartment: 'first_court',
    applyDate: '2023-11-01',
    effectiveDate: '2023-11-15',
    status: 'executed',
    applicant: '玉皇大帝',
    reason: '工作表现优异，具备独立处理复杂案件的能力，经考核合格后晋升',
    approvalHistory: [
      { id: 1, action: '申请提交', operator: '玉皇大帝', time: '2023-11-01 09:00', color: 'blue' },
      { id: 2, action: '审核通过', operator: '太上老君', time: '2023-11-03 14:30', color: 'green', comment: '同意晋升' },
      { id: 3, action: '调动执行', operator: '人事司', time: '2023-11-15 08:00', color: 'green' }
    ]
  },
  {
    id: 2,
    officialName: '判官李明',
    type: 'transfer',
    fromPosition: '判官',
    fromDepartment: 'first_court',
    toPosition: '判官',
    toDepartment: 'second_court',
    applyDate: '2023-11-10',
    effectiveDate: '2023-12-01',
    status: 'approved',
    applicant: '秦广王',
    reason: '因业务需要，调至第二殿支援审判工作',
    approvalHistory: [
      { id: 1, action: '申请提交', operator: '秦广王', time: '2023-11-10 10:00', color: 'blue' },
      { id: 2, action: '审核通过', operator: '楚江王', time: '2023-11-12 16:00', color: 'green', comment: '欢迎加入第二殿' }
    ]
  },
  {
    id: 3,
    officialName: '文书张华',
    type: 'promotion',
    fromPosition: '初级文书',
    fromDepartment: 'second_court',
    toPosition: '高级文书',
    toDepartment: 'second_court',
    applyDate: '2023-11-15',
    effectiveDate: '2023-12-01',
    status: 'pending',
    applicant: '楚江王',
    reason: '工作满两年，业绩优秀，申请晋升为高级文书',
    approvalHistory: [{ id: 1, action: '申请提交', operator: '楚江王', time: '2023-11-15 14:00', color: 'blue' }]
  }
])

// 表单数据
const transferForm = reactive({
  id: null,
  officialName: '',
  type: '',
  fromPosition: '',
  fromDepartment: '',
  toPosition: '',
  toDepartment: '',
  reason: '',
  effectiveDate: null,
  applicant: ''
})

// 表单验证规则
const transferRules = {
  officialName: [{ required: true, message: '请选择仙官', trigger: 'change' }],
  type: [{ required: true, message: '请选择调动类型', trigger: 'change' }],
  toPosition: [{ required: true, message: '请输入新职位', trigger: 'blur' }],
  toDepartment: [{ required: true, message: '请选择新部门', trigger: 'change' }],
  reason: [{ required: true, message: '请输入调动原因', trigger: 'blur' }],
  effectiveDate: [{ required: true, message: '请选择生效日期', trigger: 'change' }],
  applicant: [{ required: true, message: '请输入申请人', trigger: 'blur' }]
}

// 计算属性
const modalTitle = computed(() => {
  return transferForm.id ? '编辑调动记录' : '新增调动记录'
})

const filteredRecords = computed(() => {
  let result = records.value

  if (filterType.value) {
    result = result.filter((record) => record.type === filterType.value)
  }

  if (filterStatus.value) {
    result = result.filter((record) => record.status === filterStatus.value)
  }

  if (searchText.value) {
    result = result.filter((record) => record.officialName.toLowerCase().includes(searchText.value.toLowerCase()))
  }

  pagination.total = result.length
  return result
})

// 方法
const handleTabChange = (key) => {
  activeTab.value = key
  if (key === 'analysis') {
    // 添加延迟确保DOM已经渲染
    setTimeout(() => {
      initCharts()
    }, 300)
  } else {
    // 切换到其他标签页时清理图表资源
    clearCharts()
  }
}

const getTypeColor = (type) => {
  const colors = {
    promotion: 'green',
    demotion: 'red',
    transfer: 'blue',
    rotation: 'orange'
  }
  return colors[type] || 'default'
}

const getPriorityColor = (priority) => {
  const colors = {
    high: 'red',
    medium: 'orange',
    low: 'green'
  }
  return colors[priority] || 'default'
}

const getPriorityText = (priority) => {
  const texts = {
    high: '高',
    medium: '中',
    low: '低'
  }
  return texts[priority] || priority
}

const getWarningLevelColor = (level) => {
  const colors = {
    high: 'red',
    medium: 'orange',
    low: 'green'
  }
  return colors[level] || 'default'
}

const getWarningLevelText = (level) => {
  const texts = {
    high: '高风险',
    medium: '中风险',
    low: '低风险'
  }
  return texts[level] || level
}

const getTypeText = (type) => {
  const texts = {
    promotion: '晋升',
    demotion: '降职',
    transfer: '调岗',
    rotation: '轮岗'
  }
  return texts[type] || type
}

const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    approved: 'blue',
    rejected: 'red',
    executed: 'green'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待审批',
    approved: '已通过',
    rejected: '已拒绝',
    executed: '已执行'
  }
  return texts[status] || status
}

const getDepartmentName = (departmentId) => {
  const dept = departments.value.find((d) => d.id === departmentId)
  return dept ? dept.name : departmentId
}

const showAddTransferModal = () => {
  Object.assign(transferForm, {
    id: null,
    officialName: '',
    type: '',
    fromPosition: '',
    fromDepartment: '',
    toPosition: '',
    toDepartment: '',
    reason: '',
    effectiveDate: null,
    applicant: ''
  })
  transferModalVisible.value = true
}

const editRecord = (record) => {
  Object.assign(transferForm, { ...record })
  transferModalVisible.value = true
}

const viewRecord = (record) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}

const approveTransfer = (record) => {
  record.status = 'approved'
  message.success(`调动申请已审批通过`)
}

const executeTransfer = (record) => {
  record.status = 'executed'
  message.success(`调动已执行`)
}

const handleTransferSubmit = async () => {
  try {
    await transferFormRef.value.validate()

    if (transferForm.id) {
      // 编辑逻辑
      const index = records.value.findIndex((r) => r.id === transferForm.id)
      if (index !== -1) {
        records.value[index] = { ...transferForm }
      }
      message.success('调动记录更新成功')
    } else {
      // 新增逻辑
      const newRecord = {
        ...transferForm,
        id: Date.now(),
        applyDate: new Date().toISOString().split('T')[0],
        status: 'pending',
        approvalHistory: [
          {
            id: 1,
            action: '申请提交',
            operator: transferForm.applicant,
            time: new Date().toLocaleString(),
            color: 'blue'
          }
        ]
      }
      records.value.push(newRecord)
      message.success('调动申请提交成功')
    }

    transferModalVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleTransferCancel = () => {
  transferModalVisible.value = false
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const searchOfficials = (value) => {
  // 这里可以实现动态搜索仙官
}

const exportRecords = () => {
  message.info('调动记录导出功能开发中...')
}

// 新增方法
const showApplicationModal = () => {
  message.info('新增调动申请功能开发中...')
}

const processApplication = (record) => {
  message.info(`处理申请: ${record.applicant}`)
}

const viewApplication = (record) => {
  message.info(`查看申请详情: ${record.applicant}`)
}

const updateAnalysis = () => {
  message.info('更新分析数据...')
}

const exportAnalysis = () => {
  message.info('导出分析报告功能开发中...')
}

const showWarningConfigModal = () => {
  message.info('预警配置功能开发中...')
}

const editWarningRule = (rule) => {
  message.info(`编辑预警规则: ${rule.name}`)
}

const testWarningRule = (rule) => {
  message.info(`测试预警规则: ${rule.name}`)
}

const showTemplateModal = () => {
  message.info('新增模板功能开发中...')
}

const useTemplate = (template) => {
  message.info(`使用模板: ${template.name}`)
}

const editTemplate = (template) => {
  message.info(`编辑模板: ${template.name}`)
}

const copyTemplate = (template) => {
  message.info(`复制模板: ${template.name}`)
}

const deleteTemplate = (template) => {
  message.info(`删除模板: ${template.name}`)
}

const refreshCharts = () => {
  // 清除旧图表
  clearCharts()

  // 显示加载提示
  const loadingMessage = message.loading('正在刷新图表...', 0)

  // 延迟初始化图表
  setTimeout(() => {
    initCharts()

    // 关闭加载提示并显示成功消息
    setTimeout(() => {
      loadingMessage()
      message.success('图表刷新成功！', 1.5)
    }, 500)
  }, 100)
}

// 图表初始化函数
const initCharts = () => {
  // 清理现有图表
  clearCharts()

  nextTick(() => {
    try {
      // 调动趋势图表
      initTrendChart()

      // 调动类型分布图表
      initTypeChart()

      console.log('图表初始化完成')
    } catch (error) {
      console.error('图表初始化失败:', error)
      message.error('图表初始化失败，请刷新页面重试')
    }
  })
}

// 初始化趋势图表
const initTrendChart = () => {
  const trendChartDom = document.getElementById('transferTrendChart')
  if (!trendChartDom || trendChartDom.offsetWidth <= 0 || trendChartDom.offsetHeight <= 0) {
    return
  }

  try {
    trendChart.value = echarts.init(trendChartDom)

    const trendOption = {
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicInOut',
      color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F'],
      tooltip: {
        trigger: 'axis',
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 8,
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['内部调动', '跨部门调动', '晋升调动', '降职调动'],
        top: '5%',
        textStyle: {
          color: '#666',
          fontSize: 13,
          fontWeight: 'bold'
        },
        itemGap: 25
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        top: '15%',
        containLabel: true,
        backgroundColor: 'rgba(250, 250, 250, 0.3)',
        borderColor: '#ddd',
        borderWidth: 1,
        borderRadius: 6
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLine: {
          lineStyle: {
            color: '#d49a0a',
            width: 2
          }
        },
        axisTick: {
          alignWithLabel: true,
          lineStyle: {
            color: '#d49a0a'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          fontWeight: 'bold'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#d49a0a',
            width: 2
          }
        },
        axisTick: {
          lineStyle: {
            color: '#d49a0a'
          }
        },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          fontWeight: 'bold'
        },
        splitLine: {
          lineStyle: {
            color: '#e0e0e0',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '内部调动',
          type: 'line',
          data: [8, 6, 12, 10, 15, 18, 14, 16, 20, 22, 18, 25],
          smooth: true,
          lineStyle: {
            width: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#FF6B6B' },
              { offset: 1, color: '#FF8E8E' }
            ])
          },
          itemStyle: {
            color: '#FF6B6B',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: '#FF6B6B',
            shadowBlur: 10
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
              { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
            ])
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            scale: true,
            scaleSize: 12
          }
        },
        {
          name: '跨部门调动',
          type: 'line',
          data: [3, 4, 6, 5, 8, 10, 7, 9, 11, 13, 10, 12],
          smooth: true,
          lineStyle: {
            width: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#4ECDC4' },
              { offset: 1, color: '#7ED3CC' }
            ])
          },
          itemStyle: {
            color: '#4ECDC4',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: '#4ECDC4',
            shadowBlur: 10
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(78, 205, 196, 0.3)' },
              { offset: 1, color: 'rgba(78, 205, 196, 0.1)' }
            ])
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            scale: true,
            scaleSize: 12
          }
        },
        {
          name: '晋升调动',
          type: 'line',
          data: [5, 3, 8, 6, 10, 12, 9, 11, 14, 16, 13, 18],
          smooth: true,
          lineStyle: {
            width: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#45B7D1' },
              { offset: 1, color: '#73C5DA' }
            ])
          },
          itemStyle: {
            color: '#45B7D1',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: '#45B7D1',
            shadowBlur: 10
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(69, 183, 209, 0.3)' },
              { offset: 1, color: 'rgba(69, 183, 209, 0.1)' }
            ])
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            scale: true,
            scaleSize: 12
          }
        },
        {
          name: '降职调动',
          type: 'line',
          data: [1, 2, 1, 0, 1, 2, 1, 1, 0, 1, 2, 1],
          smooth: true,
          lineStyle: {
            width: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#FFA07A' },
              { offset: 1, color: '#FFB399' }
            ])
          },
          itemStyle: {
            color: '#FFA07A',
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: '#FFA07A',
            shadowBlur: 10
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 160, 122, 0.3)' },
              { offset: 1, color: 'rgba(255, 160, 122, 0.1)' }
            ])
          },
          symbol: 'circle',
          symbolSize: 8,
          emphasis: {
            scale: true,
            scaleSize: 12
          }
        }
      ]
    }

    trendChart.value.setOption(trendOption, true)
  } catch (error) {
    console.error('趋势图表初始化失败:', error)
    if (trendChart.value) {
      try {
        trendChart.value.dispose()
      } catch (e) {
        // 忽略销毁错误
      }
      trendChart.value = null
    }
  }
}

// 初始化类型图表
const initTypeChart = () => {
  const typeChartDom = document.getElementById('typeDistributionChart')
  if (!typeChartDom || typeChartDom.offsetWidth <= 0 || typeChartDom.offsetHeight <= 0) {
    return
  }

  try {
    typeChart.value = echarts.init(typeChartDom)

    const typeOption = {
      animation: true,
      animationDuration: 1500,
      animationEasing: 'elasticOut',
      color: [
        '#FF6B6B', // 鲜艳红色
        '#4ECDC4', // 青色
        '#45B7D1', // 蓝色
        '#FFA07A', // 橙色
        '#98D8C8', // 薄荷绿
        '#F7DC6F', // 黄色
        '#BB8FCE', // 紫色
        '#85C1E9', // 浅蓝色
        '#F8C471', // 金色
        '#82E0AA' // 绿色
      ],
      tooltip: {
        trigger: 'item',
        formatter: '<b>{b}</b><br/>{a}: {c} 人<br/>占比: {d}%',
        backgroundColor: 'rgba(50, 50, 50, 0.9)',
        borderColor: '#333',
        borderWidth: 1,
        borderRadius: 8,
        textStyle: {
          color: '#fff',
          fontSize: 13,
          fontWeight: 'bold'
        },
        extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.3);'
      },
      legend: {
        orient: 'vertical',
        left: '8%',
        top: 'center',
        itemGap: 15,
        textStyle: {
          color: '#666',
          fontSize: 12,
          fontWeight: 'bold'
        },
        icon: 'circle',
        itemWidth: 16,
        itemHeight: 16
      },
      series: [
        {
          name: '调动类型',
          type: 'pie',
          radius: ['40%', '75%'],
          center: ['65%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 4
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold',
              color: '#333'
            },
            itemStyle: {
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            scale: true,
            scaleSize: 10
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: 156,
              name: '部门内调动',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#FF6B6B' },
                  { offset: 1, color: '#FF8E8E' }
                ])
              }
            },
            {
              value: 89,
              name: '跨部门调动',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#4ECDC4' },
                  { offset: 1, color: '#7ED3CC' }
                ])
              }
            },
            {
              value: 123,
              name: '职位晋升',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#45B7D1' },
                  { offset: 1, color: '#73C5DA' }
                ])
              }
            },
            {
              value: 34,
              name: '职位降级',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#FFA07A' },
                  { offset: 1, color: '#FFB399' }
                ])
              }
            },
            {
              value: 67,
              name: '异地调动',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#98D8C8' },
                  { offset: 1, color: '#B8E6D3' }
                ])
              }
            },
            {
              value: 45,
              name: '临时调动',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#F7DC6F' },
                  { offset: 1, color: '#F9E79F' }
                ])
              }
            },
            {
              value: 12,
              name: '特殊调动',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#BB8FCE' },
                  { offset: 1, color: '#D2B4DE' }
                ])
              }
            }
          ]
        }
      ]
    }

    typeChart.value.setOption(typeOption, true)
  } catch (error) {
    console.error('类型图表初始化失败:', error)
    if (typeChart.value) {
      try {
        typeChart.value.dispose()
      } catch (e) {
        // 忽略销毁错误
      }
      typeChart.value = null
    }
  }
}

// resizeCharts 函数已移除，用户可以通过"刷新图表"按钮手动更新图表

// 安全清理图表资源
const clearCharts = () => {
  try {
    if (trendChart.value) {
      if (!trendChart.value.isDisposed()) {
        trendChart.value.dispose()
      }
      trendChart.value = null
    }
    if (typeChart.value) {
      if (!typeChart.value.isDisposed()) {
        typeChart.value.dispose()
      }
      typeChart.value = null
    }
  } catch (error) {
    console.error('清理图表资源失败:', error)
  }
}

onMounted(() => {
  // 页面加载时的初始化逻辑
  // 不在这里初始化图表，等待用户切换到分析标签页时再进行初始化
  // 不添加resize监听器，让用户手动刷新图表
})

// 监视标签页切换
watch(activeTab, (newTab, oldTab) => {
  if (oldTab === 'analysis' && newTab !== 'analysis') {
    // 从分析标签页切换出去时清理图表
    clearCharts()
  }
})

onBeforeUnmount(() => {
  clearCharts()
})
</script>

<style lang="scss" scoped>
.transfer-record-container {
  padding: 24px;

  // 页面头部
  .transfer-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 选项卡区域
  .tabs-section {
    margin-bottom: 24px;

    :deep(.ant-tabs-card) {
      .ant-tabs-tab {
        border: 1px solid rgba(212, 153, 10, 0.2);
        background: rgba(212, 153, 10, 0.05);

        &.ant-tabs-tab-active {
          background: $secondary-color;
          color: white;
        }
      }
    }
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 操作区域
  .action-section {
    margin-bottom: 24px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }
  }

  // 筛选区域
  .filter-section {
    margin-bottom: 24px;

    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }

  // 记录列表区域
  .record-list-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }

    :deep(.ant-card-head) {
      border-bottom: 1px solid rgba(212, 153, 10, 0.2);
    }

    :deep(.ant-table) {
      .ant-table-thead > tr > th {
        background: rgba(212, 153, 10, 0.1);
      }
    }
  }

  // 审批历史
  .approval-item {
    .approval-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;

      .approval-action {
        font-weight: bold;
        color: $primary-color;
      }

      .approval-time {
        color: $text-secondary;
        font-size: 14px;
      }
    }

    .approval-operator {
      color: $text-secondary;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .approval-comment {
      color: $text-primary;
      font-style: italic;
    }
  }

  // 图表容器
  .chart-container {
    height: 400px;
    border: 2px solid rgba(212, 153, 10, 0.3);
    border-radius: 16px;
    color: $text-secondary;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .chart-placeholder {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: $text-secondary;
      z-index: 2;

      p {
        margin: 12px 0;
        font-size: 15px;
        line-height: 1.6;

        &:first-child {
          font-weight: bold;
          color: #ff6b6b;
          font-size: 18px;
          text-shadow: 0 2px 4px rgba(255, 107, 107, 0.2);
        }

        &:last-child {
          color: #666;
          font-size: 13px;
          opacity: 0.8;
        }
      }
    }
  }

  // 图表标题美化
  .transfer-trend,
  .type-distribution {
    h4 {
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
      text-align: center;
      padding: 8px 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
        border-radius: 2px;
      }
    }
  }

  // 分析摘要
  .analysis-summary {
    margin-top: 24px;

    .summary-item {
      text-align: center;
      padding: 16px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 8px;

      .summary-title {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 8px;
      }

      .summary-value {
        font-size: 24px;
        font-weight: bold;
        color: $primary-color;
        margin-bottom: 8px;
      }

      .summary-trend {
        font-size: 12px;
        color: $text-secondary;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
    }
  }

  // 预警列表
  .warning-alerts {
    .alert-list {
      .alert-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 77, 79, 0.2);
        border-radius: 8px;
        background: rgba(255, 77, 79, 0.05);

        .alert-icon {
          color: #ff4d4f;
          font-size: 16px;
        }

        .alert-content {
          flex: 1;

          .alert-title {
            font-weight: bold;
            color: $primary-color;
            margin-bottom: 4px;
          }

          .alert-description {
            font-size: 12px;
            color: $text-secondary;
            margin-bottom: 4px;
          }

          .alert-time {
            font-size: 12px;
            color: $text-secondary;
          }
        }
      }
    }
  }

  // 模板列表
  .template-list {
    .template-item {
      margin-bottom: 16px;
      padding: 16px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .template-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;

        .template-info {
          flex: 1;

          .template-name {
            margin: 0 0 4px 0;
            color: $primary-color;
            font-size: 16px;
            font-weight: bold;
          }

          .template-description {
            margin: 0;
            color: $text-secondary;
            font-size: 14px;
          }
        }
      }

      .template-content {
        .template-fields {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;

          .field-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .field-label {
              font-size: 12px;
              color: $text-secondary;
              white-space: nowrap;
            }

            .field-value {
              font-size: 12px;
              color: $primary-color;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  // 模板统计
  .template-stats {
    .stats-list {
      .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding: 8px 12px;
        border: 1px solid rgba(212, 153, 10, 0.2);
        border-radius: 4px;

        .stat-label {
          font-size: 14px;
          color: $text-secondary;
        }

        .stat-value {
          font-weight: bold;
          color: $primary-color;
        }
      }
    }
  }
}
</style>
